<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>教师端|教师列表</title>
<link rel="icon" href="${ctx}/static/bootstrap/favicon.ico" type="image/ico">
<link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<!--对话框-->
<link rel="stylesheet" href="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.css">
<link href="${ctx}/static/bootstrap/css/style.min.css" rel="stylesheet">
<!--通知消息-->
<link href="${ctx}/static/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/static/bootstrap/css/animate.css" rel="stylesheet">
<style type="text/css">
	label.error{color:red;}	
</style>
</head>

<body>
	<div class="container-fluid p-t-15">
		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						<h4>教师信息</h4>
					</div>
					<div class="card-body" >
						<form class="form-inline" id="form-teacher-query">
							<div class="form-group">
								<label for="id" class="control-label">教师编号：</label> 
								<input class="form-control" type="text" id="id" name="id">
							</div>
							<div class="form-group">
								<button class="btn btn-success" id="btnQuery" type="button">查询</button>
								<button class="btn btn-danger" id="btnReset" type="button">重置</button>
							</div>
						</form>
						<table id="myTable"></table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

	<!--表单验证插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/jquery.validate.extend.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/additional-methods.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/jquery-validation-1.19.3/messages_zh.js"></script>
	<!--行内编辑插件-->
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
	<!--对话框-->
	<script src="${ctx}/static/bootstrap/js/jconfirm/jquery-confirm.min.js"></script>	
	<!--消息提示-->
	<script src="${ctx}/static/bootstrap/js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/lightyear.js"></script>
	<script type="text/javascript" src="${ctx}/static/bootstrap/js/main.min.js"></script>
	<script type="text/javascript">
	//获取上下文路径
		function getContextPath(){
		    var pathName = document.location.pathname;
		    var index = pathName.substr(1).indexOf("/");
		    var result = pathName.substr(0,index+1);
		    return result;
		}
		var ctx = getContextPath();
		
		/* var deleteUrl = "${ctx}/teacher/delete/"; */
		/* var addUrl="${ctx}/teacher/add/"; */
		/* var editUrl="${ctx}/teacher/edit/"; */
		var listUrl="${ctx}/teacher/list/";
		
		//查询
		$("#btnQuery").click(function(){
			$("#myTable").bootstrapTable('refresh');
		})
		
		//重置
		$("#btnReset").click(function(){
			$("#form-teacher-query")[0].reset();
			$("#myTable").bootstrapTable('refresh');
		})
		
		$("#myTable").bootstrapTable({
			classes : 'table table-bordered table-hover table-striped', //指定表格样式
			url : listUrl, //获取远程(后台)数据的url
			method : 'get', //请求方式 get,post
			dataType : 'json', //数据形式：json，若是跨域，则使用jsonp，因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
			uniqueId : 'id',
			idField : 'id', // 每行的唯一标识字段 
			toolbar : '#toolbar', //指定工具栏
			showColumns: true, //是否显示所有列
			showToggle: true,  //是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)		  
			showRefresh: true, //是否显示刷新按钮
			search: false,      //是否启用搜索，客户端搜索
			pagination : true, //是否启用分页
			sortOrder : 'asc', //排序方式：asc-升序，desc-降序，按照idField
			queryParams : function(params) { //定义分页查询数据
				var temp = {
					pageSize : params.limit, // 每页数据量
					offset : params.offset, // sql语句起始索引
					pageNumber : (params.offset / params.limit) + 1,
					sort : params.sort, // 排序的列名
					sortOrder : params.order,
					id:$("#form-teacher-query").find("#id").val(),
					teacherName:$("#form-teacher-query").find("#teacherName").val()
				};
				return temp;
			},
			sidePagination : 'server', // 分页方式：client客户端分页，server服务端分页
			pageNumber : 1, // 初始化加载第一页，默认第一页
			pageSize : 10, // 每页的记录行数
			pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数
			columns : [ {
				checkbox : true
			}, {
				field : 'id',
				title : '教师编号',
				sortable : true
			}, {
				field : 'teacherName',
				title : '教师姓名'
			}, {
				field : 'teacherSex',
				title : '教师性别'
			}, {
				field : 'teacherPhone',
				title : '教师电话'
			}, 
			{
				field: 'status',
				title: '状态',
				formatter: function(value, row, index){
					var you = "<span class='label label-success'>有课程安排</span>";
					var xian = "<span class='label label-danger'>无课程安排</span>";
					return value==0?xian:you;
				}
			}]
		});

	</script>
</body>
</html>